{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}{% endblock %}
{% block header %}{% endblock %}
{% block content %}

<div id="slideout-panel">
	<div class="panel-toolbar">
		<span class="panel-close-btn">close <span>x</span></span>
	</div>
	<div id="panel-content">
	</div>
</div>

<div id="rank-list" class="clearfix">
	<div id="left-inner">
		<div class="profile-header clearfix">
			<div class="profile-image-container">
				{% if profile.profileImage %}
				<div id="profile_photo"><img src="{{ profile.profileImage.display.url }}"></div>
				{% else %}
				<div id="empty-profile-photo"></div>
				{% endif %}
			</div>
			<div class="profile-details">
				<div class="username">{{ user.username }}</div>
			</div>
		</div>
	</div>
	<a href="/profile/edit">Edit Profile</a>
	<ul class="filters">
		<a href="/api/dishes/filter/newest"><li id="newest-filter">Mashes</li></a>
		<a href="/api/dishes/filter/best"><li id="best-filter">Reviews</li></a>
		<a href="/api/dishes/filter/popular"><li id="popular-filter">Lists</li></a>
		<a href="/api/dishes/filter/popular"><li id="popular-filter">Followers</li></a>
		<a href="/api/dishes/filter/popular"><li id="popular-filter">Following</li></a>
	</ul>
</div>

</div>

<div id="right-container">

	<div id="profile_info">
		<ul>
			<li>Member Since: {{ profile.created_date }}</li>
			<li>Website: {{ profile.website }}</li>
			<li>Location: {{ profile.location }}</li>
		</ul>
	</div>
	
	<div id="profile_content">
		<div id="profile_content_header">
			Lives in {{ profile.location }}.<br />
			{{ user.review_set.count }} reviews.
		</div>
		<div id="profile_reviews_list">
			The reviews go here.
		</div>
		<div id="profile_bookmarked_dishes">
			The bookmarked dishes go here.
		</div>
		<div id="profil_dish_lists">
			The lists go here.
		</div>
	</div>
</div>

{% endblock %}